import Tabs from '@/components/Tabs'
import { getAllChannels, getChannels } from '@/store/actions/home'
import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Drawer } from 'antd-mobile'
import styles from './index.module.scss'
import Icon from '@/components/icon'
import Channels from './Channels'
import ArticleList from './ArticleList'
import FeedbackActionMenu from './FeedbackActionMenu'
export default function Home() {
  const disptch = useDispatch()
  const tabs = useSelector((state) => state.home.channels)
  const [active, setActive] = useState(0)
  const onChange = (e) => {
    setActive(e)
  }
  useEffect(() => {
    disptch(getChannels())
    disptch(getAllChannels())
  }, [disptch])
  // 控制抽屉组件
  // 控制频道管理抽屉的显示和隐藏
  const [drawerVisible, setDrawerVisible] = useState(false)
  // 关闭弹出频道层
  const onClose = () => {
    setDrawerVisible(false)
  }
  return (
    <div className={styles.root}>
      <Tabs index={active} onChange={onChange} tabs={tabs}>
        {/* 频道 Tab 对应的内容 */}
        {tabs.map((ch) => (
          <ArticleList
            key={ch.id}
            channelId={ch.id}
            activeId={tabs[active].id}
          />
        ))}
      </Tabs>
      {/* 频道 Tab 栏右侧的两个图标按钮：搜索、频道管理 */}
      <div className="tabs-opration">
        <Icon type="iconbtn_search" />
        <Icon onClick={() => setDrawerVisible(true)} type="iconbtn_channel" />
      </div>
      <Drawer
        className="my-drawer"
        children={''}
        open={drawerVisible}
        sidebar={
          drawerVisible && (
            <Channels
              index={active}
              onChange1={onChange}
              onClose={onClose}
            ></Channels>
          )
        }
        onClose={onClose}
      ></Drawer>
      <FeedbackActionMenu></FeedbackActionMenu>
    </div>
  )
}
